<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"
    ></script>
  </head>
  <body>
    <button onclick="updateList()">点我更新列表</button>
    <div id="root"></div>
  </body>
  <script type="text/babel">
    const data = ["孙悟空", "猪八戒", "沙和尚"];
    const list = (
      <ul>
        {data.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    );

    const Root = ReactDOM.createRoot(document.getElementById("root"));
    Root.render(list);

    function updateList() {
      /**
       * 没有key时,默认按照位置比较
       *
       * 情况一:const data = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
       *      当顺序不变时,渲染变化比较小
       *
       * 情况二:const data = [ "唐僧","孙悟空", "猪八戒", "沙和尚"];
       *      当往前插入时,所有元素位置都发生变化,所有元素都变化
       *
       * 情况三:const data = [ "唐僧","孙悟空", "猪八戒", "沙和尚"];
       *      当有key时,变化相同key的元素,性能较好
       *
       *      注意：
       *           1.开发中一般会采用数据的id作为key
       *           2.尽量不要使用元素的index作为key
       *               索引会跟着元素顺序的改变而改变，所以使用索引做key跟没有key是一样的
       *                   唯一的不同就是，控制台的警告没了
       *               当元素的顺序不会发生变化时，用索引做key也没有什么问题
       */
      const data = ["唐僧", "孙悟空", "猪八戒", "沙和尚"];
      const list = (
        <ul>
          {data.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      );

      Root.render(list);
    }
  </script>
</html>
